<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="100px">
        <el-row class="search-input">
          <el-form-item prop="userAccount" label="用户账号：">
            <el-input type="text" v-model.trim="filters.userAccount" placeholder="用户账号" maxlength="80" clearable></el-input>
          </el-form-item>
          <el-form-item prop="nickName" label="用户昵称：">
            <el-input type="text" v-model.trim="filters.nickName" placeholder="用户昵称" maxlength="80" clearable></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号：">
            <el-input type="text" v-model.trim="filters.phone" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                      placeholder="手机号" minlength="11" maxlength="11" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row class="t_r button20">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <!--分销员代理列表-->
    <cy-table
      @findPage="findPage"
      :operationWidth="300"
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showAuditOperation="true"
      auditLabel="审核"
      @handleAudit="handleAudit"
      :showOperation="true"
      ref="CyTable"
    ></cy-table>

    <!--分销员弹框-->
    <el-dialog title="分销代理审核" width="30%" :visible.sync="editDialogVisible" :close-on-click-modal="false" @closed="handleClose">
      <el-form :model="dataForm" label-width="120px" ref="dataForm" :size="size">
        <el-row class="searchDialog-input">
          <el-form-item label="ID" prop="id" v-show="false">
            <el-input v-model="dataForm.id" style="width: 400px;"></el-input>
          </el-form-item>
          <el-form-item label="审核状态：" prop="status">
            <el-select v-model="dataForm.status"
                       style="width: 100%"
                       clearable>
                <el-option label="待审核" :value="1"></el-option>
                <el-option label="审核通过" :value="2"></el-option>
                <el-option label="审核拒绝" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拒绝原因：" prop="remark" v-show="dataForm.status==3">
            <el-input v-model="dataForm.remark"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="handleClose">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'
  import CyTable from '@/views/Core/JicTable'
  import PmTable from '@/components/jicComponentGallery/jicTable'
  import Qriously from 'v-qriously'
  import {validatePhone} from '@/utils/validate'

  export default {
    components: {
      KtButton,
      CyTable,
      PmTable,
      Qriously,
    },

    data() {
      return {
        size: 'mini',
        filters: {
          userAccount: '',
          nickName: '',
          phone: ''
        },
        options: [],
        editDialogVisible: false,
        columns: [
          {prop: 'id', label: 'ID', minWidth: 50},
          {
            prop: 'userAccount', label: '用户账号', minWidth: 100,
            formatter: function (row, column, prop) {
              if (prop == '') return '-'
              else return prop
            }
          },
          {
            prop: 'nickName', label: '用户昵称', minWidth: 100,
            formatter: function (row, column, prop) {
              if (prop == '') return '-'
              else return prop
            }
          },
          {prop: 'phone', label: '手机号码', minWidth: 100},
          {prop: 'totalDistributionPerformance', label: '分销总业绩', minWidth: 80},
          {prop: 'totalCommission', label: '佣金总额', minWidth: 80},
          {prop: 'settleAccounts', label: '结算金额', minWidth: 80},
          {
            prop: 'status',
            label: '状态',
            minWidth: 80,
            formatter: function (row, column, prop) {
              if (prop == 1) return '待审核'
              else if (prop == 2) return '审核通过'
              else if (prop == 3) return '审核拒绝'
            }
          },
          {prop: 'createTime', label: '注册时间', minWidth: 120}
        ],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        dataForm: {
          id:"",
          status:1,
          remark:""
        },
      }
    },

    methods: {
      // 获取分页数据
      findPage: function (data) {
        let this_ = this
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {}
        }
        this_.filters.start = this.pageRequest.pageNum
        this_.filters.limit = this.pageRequest.pageSize
        this.utils.request.queryMemberUserDistributorList(this_.filters, function (res) {
          if (res.data.rows.length === 0) {
            res.data.rows = []
            this_.$message({message: '查询暂无数据', type: 'warning'})
          }
          this_.$refs.CyTable.findPage({content: res.data.rows, total: res.data.total})
        })
      },

      //提交按钮--审核
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            let params = Object.assign({}, this.dataForm)
            let this_ = this
            this.utils.request.memberUserDistributorAudit(params, function (res) {
              if (res.code == '0000') {
                this_.$message({message: '操作成功', type: 'success'})
                this_.editDialogVisible = false
                this_.findPage(null)
              } else {
                this_.$message({message: '操作失败, ' + res.msg, type: 'error'})
              }
            })
          }
        })
      },

      // 重置
      resetForm(formName) {
        let flag = this.filters.phone === '' && this.filters.userAccount === '' && this.filters.nickName === ''

        if (flag) {
          this.$message({message: '请输入查询条件', type: 'warning'})
          return
        }

        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields()
          this.findPage(null)
        }
      },

      // 关闭
      handleClose() {
        this.editDialogVisible = false
        this.options = []
        this.$refs.dataForm.resetFields()
      },

      // 审核
      handleAudit(data) {
        this.editDialogVisible = true
        this.dataForm.id = data.row.id
        this.dataForm.status = data.row.status
        this.dataForm.remark = data.row.remark
        console.log(data.row.status);
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = []

        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp
      }
    },

    mounted() {
      this.initColumns()
    }
  }
</script>

<style scoped lang='scss'>
  .btn-left {
    margin-left: 45px;
  }
</style>
